
const {ccclass, property} = cc._decorator;

@ccclass
export default class TabViewPanelScript extends cc.Component {

    @property(cc.Button)
    private closeBtn:cc.Button = null;

    @property(cc.ToggleContainer)
    private tabContainer: cc.ToggleContainer = null;

    @property(cc.Node)
    private groupNode: cc.Node = null;


    //需要切换的三个页面
    @property(cc.Prefab)
    private v1Prefab:cc.Prefab = null;
    @property(cc.Prefab)
    private v2Prefab:cc.Prefab = null;
    @property(cc.Prefab)
    private v3Prefab:cc.Prefab = null;

    // onLoad () {}

    start () {
        this.closeBtn.node.on(cc.Node.EventType.TOUCH_END,this.remove,this);
        const tabs = this.tabContainer.toggleItems;

        var checkEventHandler = new cc.Component.EventHandler();
        checkEventHandler.target = this.node;
        checkEventHandler.component = "TabViewPanelScript"
        checkEventHandler.handler = "tabChecked";
        checkEventHandler.customEventData = "foobar";
        this.tabContainer.checkEvents.push(checkEventHandler);
        
        this.tabChecked(tabs[0],"");
        
    }

    private tabChecked(toggle, customEventData) {

        this.groupNode.removeAllChildren();

        //cc.warn("toggle",toggle.node.name);
        if(toggle.node.name == "toggle1"){
            //cc.log("选中,toggle1")
            let v1 = cc.instantiate(this.v1Prefab);
            this.groupNode.addChild(v1);
            v1.x = v1.y = 0;
            v1.scale = 0.7;
        }
        else if(toggle.node.name == "toggle2"){
            //cc.log("选中,toggle2")
            let v2 = cc.instantiate(this.v2Prefab);
            this.groupNode.addChild(v2);
            v2.x = v2.y = 0;
            v2.scale = 0.7;
        }
        else if(toggle.node.name == "toggle3"){
            //cc.log("选中,toggle3")
            let v3 = cc.instantiate(this.v3Prefab);
            this.groupNode.addChild(v3);
            v3.x = v3.y = 0;
            v3.scale = 0.7;
        }
       
    }

    private remove():void
    {   
        this.closeBtn.node.off(cc.Node.EventType.TOUCH_END,this.remove,this); 
        this.node.destroy();
    }
}
